<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>输入卡号</title>
    <script src="__PUBLIC__/Product/js/lib/flexible.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .input_box .input_heard {
            width: 100%;
            height: 1.186667rem;
            background: linear-gradient(to right, #6951bc, #a163e0);
            position: relative;
        }
        .input_box .input_heard .goback {
            width: 0.226667rem;
            height: 0.453333rem;
            position: absolute;
            bottom: 0.36rem;
            left: 0.266667rem;
        }
        .input_box .input_heard p {
            font-size: 0.48rem;
            line-height: 1.186667rem;
            text-align: center;
            color: white;
        }
        .input_con .null {
            width: 9.466667rem;
            height: 1.066667rem;
            padding: 0 .266667rem;
            line-height: 1.066667rem;
            font-size: .32rem;
        }
        .input_con .input_list_ul {
            width: 9.466667rem;
            height: 2.6rem;
            padding: 0 .266667rem;
            border-top: .013333rem solid #e9e9e9;
            border-bottom: .013333rem solid #e9e9e9;
            background-color: white;
            margin-bottom: 1.52rem;
        }
        .input_con .input_list_ul li {
            width: 100%;
            height: 1.253333rem;
            display: flex;
        }
        .input_con .input_list_ul li:nth-child(1) {
            border-bottom: .013333rem solid #e9e9e9;
        }
        .input_con .input_list_ul li div {
            width: 1.6rem;
            height: 100%;
            line-height: 1.253333rem;
            font-size: .373333rem;
        }
        .input_con .input_list_ul li input {
            width: 6.666667rem;
            border: 0;
            outline: none;
            padding-left: .4rem;
            -webkit-appearance: none;
            font-size: .373333rem;
        }
        .input_con button {
            width: 9.466667rem;
            height: 1.173333rem;
            font-size: .4rem;
            color: white;
            border: 0;
            background-color: #d1d1d1;
            margin-left: .266667rem;
            border-radius: .106667rem;
            outline: none;
        }
        .input_con .active {
            background: linear-gradient(to right, #6951bc, #a163e0);
        }
    </style>
</head>
<body style="background-color:#f4f4f4;">
    <div class="input_box">
        <!-- 头部 -->
        <div class="input_heard">
            <img class="goback" src="__PUBLIC__/Product/img/fanhui.png" alt="返回">
            <p>输入卡号</p>
        </div>
        <!-- 内容 -->
        <div class="input_con">
            <div class="null">请绑定持卡人本人的银行卡</div>
            <ul class="input_list_ul">
                <li>
                    <div>持卡人</div>
                    <input type="text" placeholder="请输入持卡人姓名">
                </li>
                <li>
                    <div>卡号</div>
                    <input type="number" placeholder="请输入卡号" class="cardNum" maxlength="19">
                </li>
            </ul>
            <button>下一步</button>
        </div>
    </div>
</body>
</html>
<script src="__PUBLIC__/Product/js/lib/jquery3.2.1.js"></script>
<script>
    $(function () {
        $('.goback').bind('click', function () {
            window.location.href = document.referrer; //返回上一页并刷新
        });
        $('.cardNum').bind("input propertychange", function() {
            var Num = $(this).val();
            if (Num.length == 16 || Num.length == 19) {
                if (luhmCheck(Num)) {
                    $('.input_con button').attr('disabled',false).addClass('active');
                } else {
                    $('.input_con button').attr('disabled',true).removeClass('active');
                }
            } else {
                $('.input_con button').attr('disabled',true).removeClass('active');
            }
        });
        // 点击下一步
        $('.input_con button').bind('click',function(){
            var Num = $('.cardNum').val();
//          $.ajax({  
//              url: 'https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardNo=' + Num + '&cardBinCheck=true',  
//              type: "get",  
//              dataType: "jsonp",  
//              async:false,  
//              jsonp:'callback',  
//              jsonpCallback:'success_jsonpCallback',  
//              success: function(data) {
//                  console.log(data);
//              }  
//          });
			window.location.href = 'detailInfo.html';
        });

        // 校验规则：16位银行卡号（19位通用），16位位信用卡 19位为普通银行卡
        // 1.将未带校验位的 15（或18）位卡号从右依次编号 1 到 15（18），位于奇数位号上的数字乘以 2。
        // 2.将奇位乘积的个十位全部相加，再加上所有偶数位上的数字。
        // 3.将加法和加上校验位能被 10 整除。
        // 方法步骤很清晰，易理解，需要在页面引用Jquery.js    
        function luhmCheck(bankno) {
            var lastNum = bankno.substr(bankno.length - 1, 1);      //取出最后一位（与luhm进行比较）
            var first15Num = bankno.substr(0, bankno.length - 1);   //前15或18位
            var newArr = new Array();
            for (var i = first15Num.length - 1; i > -1; i--) {      //前15或18位倒序存进数组
                newArr.push(first15Num.substr(i, 1));
            }
            var arrJiShu = new Array();             //奇数位*2的积 <9
            var arrJiShu2 = new Array();            //奇数位*2的积 >9
            var arrOuShu = new Array();             //偶数位数组
            for (var j = 0; j < newArr.length; j++) {
                if ((j + 1) % 2 == 1) {             //奇数位
                    if (parseInt(newArr[j]) * 2 < 9)
                        arrJiShu.push(parseInt(newArr[j]) * 2);
                    else
                        arrJiShu2.push(parseInt(newArr[j]) * 2);
                } else                              //偶数位
                    arrOuShu.push(newArr[j]);
            }
            var jishu_child1 = new Array();         //奇数位*2 >9 的分割之后的数组个位数
            var jishu_child2 = new Array();         //奇数位*2 >9 的分割之后的数组十位数
            for (var h = 0; h < arrJiShu2.length; h++) {
                jishu_child1.push(parseInt(arrJiShu2[h]) % 10);
                jishu_child2.push(parseInt(arrJiShu2[h]) / 10);
            }
            var sumJiShu = 0;                       //奇数位*2 < 9 的数组之和
            var sumOuShu = 0;                       //偶数位数组之和
            var sumJiShuChild1 = 0;                 //奇数位*2 >9 的分割之后的数组个位数之和
            var sumJiShuChild2 = 0;                 //奇数位*2 >9 的分割之后的数组十位数之和
            var sumTotal = 0;
            for (var m = 0; m < arrJiShu.length; m++) {
                sumJiShu = sumJiShu + parseInt(arrJiShu[m]);
            }
            for (var n = 0; n < arrOuShu.length; n++) {
                sumOuShu = sumOuShu + parseInt(arrOuShu[n]);
            }
            for (var p = 0; p < jishu_child1.length; p++) {
                sumJiShuChild1 = sumJiShuChild1 + parseInt(jishu_child1[p]);
                sumJiShuChild2 = sumJiShuChild2 + parseInt(jishu_child2[p]);
            }
            //计算总和
            sumTotal = parseInt(sumJiShu) + parseInt(sumOuShu) + parseInt(sumJiShuChild1) + parseInt(sumJiShuChild2);
            //计算Luhm值
            var k = parseInt(sumTotal) % 10 == 0 ? 10 : parseInt(sumTotal) % 10;
            var luhm = 10 - k;
            if (lastNum == luhm) {
                //Luhm
                return true;
            } else {
                //银行卡号必须符合Luhm校验
                return false;
            }
        }
    });
</script>